<template>
<div class="tab-box">
  <div class="tab-hd">
    <template v-for="tab in tabs" :key="tab.value">
      <div 
        class="g-fs-36 tab-item"
        :class="{active: activeTab === tab.value}"
        @click="activeTab = tab.value"
      >
        <slot v-if="customTab" :name="`tab-${tab.value}`" :tab="tab">
          {{ tab.label }}
        </slot>
        <template v-else>
          {{ tab.label }}
        </template>
      </div>
    </template>
  </div>
</div>
</template>

<script setup lang="ts">
import { ref, computed, PropType } from 'vue'

interface TabI {
  label: string;
  value: string;
}

const props = defineProps({
  tabs: {
    type: Array as PropType<TabI[]>,
    required: true,
    default: () => []
  },
  modelValue: {
    type: String,
    required: true
  },
  customTab: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const activeTab = computed<string>({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<style lang="scss" scoped>
.tab-box{
  .tab-hd {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
    justify-content: center;

    .tab-item {
      padding: 8px 16px;
      cursor: pointer;
      color: #666;
      transition: all 0.3s;
      position: relative;
      box-sizing: border-box;
      &.active {
        color: #333;
        border-bottom: none;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 8rpx;
          border-radius: 4rpx;
          background-color: #7966B3;
          transform: scaleX(1);
          transform-origin: left center;
          transition: transform 0.3s ease;
        }
      }

      &:hover {
        color: #333;
      }
    }
  }
}
</style>
